import useDevice from '@/hooks/device'
import { PropType } from 'vue'
import { TxconfForJSON, TxconfForMODBUS } from '../card/devConfigInfo'
import CCard from '../card'
import useEditModule from '@/hooks/useEditModule'
import { CnBoldP } from '../text'
import useLoading from '@/hooks/loading'

type DrawerOption = {
  widht: string | number | null
  title: string
  placement: 'left'
  size: 'default' | 'large' | null
}

const DeviceConConfDrawer = defineComponent({
  name: 'DeviceConConfDrawer',
  props: {
    devId: {
      type: Number as PropType<DevId>
    },
    outerClass: {
      type: String,
      default: ''
    },
    btnClass: {
      type: String,
      default: ''
    },
    devName: {
      type: String,
      required: true
    },
    drawerOption: {
      type: Object as PropType<DrawerOption>,
      default: {
        width: '800px',
        placement: 'right',
        title: '设备传输协议'
      }
    },
    isEdit: Boolean
  },
  emits: {},
  setup(props, { emit }) {
    const { devTypeModuleConConfig, updateDevConConfig, getDevModuleConConfigOperatingrecord } =
      useDevice()

    const { moduleDisabled, openModule, closeModule } = useEditModule()

    const {
      loading: editSubmitLoading,
      startLoading: editSubmitStartLoading,
      closeLoading: editSubmitcloseLoading
    } = useLoading()

    const drawerVisible = ref(false)

    const drawerClose = (e: any) => {
      drawerVisible.value = false
    }

    const handleOpenDrawer = () => {
      drawerVisible.value = true
      updateDevConConfig({ devId: props.devId })
    }

    function handleEditSubmit() {
      console.log(getDevModuleConConfigOperatingrecord.value)
    }
    function handleEditCancel() {
      closeModule()
      updateDevConConfig({ devId: props.devId })
    }

    return () => (
      <span class={[props.btnClass]} onClick={handleOpenDrawer}>
        传输协议
        <a-drawer
          width='800px'
          title={props.devName + '——' + props.drawerOption.title}
          placement={props.drawerOption.placement}
          visible={drawerVisible.value}
          onClose={drawerClose}
          bodyStyle={{ margin: 0, padding: 0 }}
        >
          <div class='w-full h-full overflow-auto'>
            <CCard
              class='rounded-6'
              titleType='inside'
              title='通信配置'
              v-slots={{
                title: () => (
                  <div class='flex items-center justify-between space-x-12'>
                    <CnBoldP class='card-title hanzi text-14 text-xText'>通信配置</CnBoldP>
                    {!moduleDisabled.value ? (
                      <a-button size='small' onClick={openModule}>
                        修改
                      </a-button>
                    ) : (
                      <div class='flex items-center space-x-12'>
                        <a-button size='small' onClick={handleEditCancel}>
                          取消
                        </a-button>
                        ,
                        <a-button
                          loading={editSubmitLoading.value}
                          type='primary'
                          size='small'
                          onClick={handleEditSubmit}
                        >
                          提交
                        </a-button>
                      </div>
                    )}
                  </div>
                )
              }}
            >
              <div class='pt-20'>
                {devTypeModuleConConfig.value.devTypeDataTypeCode === '0019' ? (
                  <TxconfForJSON
                    v-model={[devTypeModuleConConfig.value.txConf, 'txConf']}
                    disabled={!moduleDisabled.value}
                    isEdit={true}
                  ></TxconfForJSON>
                ) : (
                  <TxconfForMODBUS
                    v-model={[devTypeModuleConConfig.value.txConf, 'txConf']}
                    disabled={!moduleDisabled.value}
                    isEdit={true}
                  ></TxconfForMODBUS>
                )}
              </div>
            </CCard>
          </div>
        </a-drawer>
      </span>
    )
  }
})

export default DeviceConConfDrawer
